<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<view class="list-page">

			<!--头部开始 -->
			<view class="list-head">
				<view class="list-search">
					<!-- 状态筛选 -->
					<view class="subsection" style="margin-top: 0;">
						<u-subsection :list="subsection2.list" v-model="subsection2.current" :offset="subsection2.offset"
							 @change="sectionChange2"></u-subsection>
					</view>
					<view class="list-search-input" style="margin-top: 20rpx;">
						<!-- 快捷搜索 -->
						<u-search v-model="queryForm1.formData[listSearch.key]" :placeholder="listSearch.placeholder" :show-action="false" input-align="center" class="search-input" shape="square" @search="search();getOrderGroupNum();" @clear="search();getOrderGroupNum();"></u-search>
						<!-- 高级搜索按钮图标 -->
						<u-icon class="advanced-search" name="list-dot" color="#909399" size="40" @click="show.advancedSearch = true" ></u-icon>
					</view>
					<!-- 状态筛选 -->
					<view class="subsection">
						<u-subsection :list="subsection1.list" v-model="subsection1.current" :offset="subsection1.offset"
							active-color="var(--main)" bg-color="#ffffff" @change="sectionChange1"></u-subsection>
					</view>
				</view>
				<!-- 总记录数 -->
				<view class="total-desc"> 共 <text class="total-num">{{ data.total }}</text> 条记录 <text style="margin-left: 20rpx;font-size: 24rpx;">注意：已取消的订单只保留7天</text></view>
			</view>
			<!--头部结束 -->

			<!--无内容时 -->
			<view v-if="data.list.length == 0" style="padding: 40% 0 80% 0;">
				<u-empty v-if="loading" text="查询中..." mode="search"></u-empty>
				<u-empty v-else text="暂无内容" mode="list"></u-empty>
			</view>
			<!--有内容时开始-->
			<view v-else class="list-main">
				<block v-for="(item, index) in data.list" :key="item._id">
					<!-- ****************** 自定义item的内容开始 ****************** -->

					<view class="list-item">
						<view class="content" @click.stop="collapse(index)">
							<!-- 收货人 订单状态 -->
							<view class="top">
								<view class="nickname">{{ item.express_info.receiver_name }}</view>
								<view class="status">{{ status3Fn(item) }}</view>
							</view>
							<!-- 商品列表 -->
							<view class="goods-list">
								<vk-mall-order-goods-list :list="item.goods_sku_list"></vk-mall-order-goods-list>
							</view>
							<view style="text-align: right;">实付金额：¥{{ $fn.priceFilter(item.amount_info.payment_amount) }}</view>
						</view>
						<view class="collapse" :class="footer.actived === index ? 'actived' : 'actived'">
							<block v-for="(btn, btnIndex) in footer.list" :key="btnIndex">
								<view v-if="footerShowFn(btn, item, index)" @click="footerBtn(item, btn, index)" :class="btn.main ? 'main':''">
									{{ btn.text }}
								</view>
							</block>
						</view>
					</view>

					<!-- ****************** 自定义item的内容结束 ****************** -->
				</block>
				<!-- 加载更多-->
				<u-loadmore :status="state.loadmore" bg-color="var(--bgcolor)" margin-bottom="30" @loadmore="nextPage" />
			</view>
			<!--有内容时结束-->
		</view>

		<!-- 高级搜索弹窗开始 -->
		<u-popup v-model="show.advancedSearch" mode="top" closeable>
			<view class="search-popup">
				<scroll-view scroll-y="true" class="scroll-view">
					<view>
						<!-- ****************** 自定义高级搜索表单开始 ****************** -->
						<u-form
							:model="queryForm1.formData"
							ref="queryForm1"
							label-position="top"
							:label-style="{ fontWeight: '500' }"
						>
							<u-form-item label="下单时间" prop="_add_time">
								<view class="date-range" @click="show._add_time = true">
									{{ queryForm1.formData._add_time[0] ? $fn.timeFormat(queryForm1.formData._add_time[0], "yyyy/MM/dd") + " - " + $fn.timeFormat(queryForm1.formData._add_time[1], "yyyy/MM/dd") : "日期范围" }}
								</view>
							</u-form-item>
							<u-form-item label="商品名称" prop="goods_name">
								<u-input v-model="queryForm1.formData.goods_name" />
							</u-form-item>
						</u-form>
						<!-- 日历范围选择组件 -->
						<u-calendar
							v-model="show._add_time"
							mode="range"
							safe-area-inset-bottom
							btn-type="default"
							active-bg-color="var(--main)"
							range-bg-color="var(--secondary)"
							@change="calendarChange"
						></u-calendar>
						<!-- ****************** 自定义高级搜索表单结束 ****************** -->
					</view>
				</scroll-view>
				<view class="footer-btn">
					<view class="btn reset" @click="advancedSearchReset">重 置</view>
					<view class="btn confirm" @click="advancedSearchConfirm">确 定</view>
				</view>
			</view>
		</u-popup>
		<!-- 高级搜索弹窗结束 -->

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
	</view>
</template>

<script>
var vk = uni.vk;
var originalForms = {}; // 表单初始化数据
export default {
	data() {
		// 页面数据变量
		return {
			// 获取list数据的云函数请求路径
			url: "client/order.getMyOrderList",
			// init请求返回的数据
			data: {
				list: [],
				total: "-",
				hasMore: true // 是否还有下一页数据
			},
			// 列表查询请求数据
			queryForm1: {
				// 分页数据
				pagination: {
					pageIndex: 1, //当前页码
					pageSize: 20 //每页显示数量
				},
				// 查询表单数据源，可在此设置默认值
				formData: {
					_add_time: [],
					searchvalue: "",
					easy_status: "",
					order_type: 0,
					goods_name:""
				},
				// 查询匹配规则 fieldName:指定数据库字段名,不填默认等于key
				columns: [
					{ key: "_add_time", mode: "[]" },
					{ key: "order_no", mode: "%%" },
					{ key: "order_type", mode: "=" },
					{ key: "goods_name", mode: "%%", fieldName:"goods_sku_list.goods_name" },
					//{ key: "easy_status", mode: "=" }
				],
				// 排序规则
				sortRule: [
					{ name:"_add_time", type:"desc" }, // desc降序 asc升序
				]
			},
			// 列表搜索框 key 可以是 queryForm1.columns 中的任意1个key
			listSearch: { key: "order_no", placeholder: "输入订单号搜索" },
			// 页面状态
			state: {
				loadmore: "loading", // loadmore的显示状态
			},

			subsection2:{
				key: "order_type", // 查询字段名
				current: 1, // 当前选中的索引
				list: [
					{ name: "全部", value: "" },
					{ name: "电商", value: 0 },
					{ name: "电子卡券", value: 1 },
				]
			},
			// 头部状态选择
			subsection1: {
				key: "easy_status", // 查询字段名
				current: 0, // 当前选中的索引
				offset:[0,0],
				list: [
					{ name: "全部", value: "", num:0 },
					{ name: "待付款", value: 0, num:0 },
					{ name: "待发货", value: 1, num:0 },
					{ name: "待收货", value: 2, num:0 },
					{ name: "待评价", value: 3, num:0 },
					{ name: "售后", value: 4, num:0 }
				]
			},
			// 每一项底部的拓展按钮
			footer: {
				actived: "",
				color: "#909399",
				list: [
					{
						text: "立即付款",
						main: true, // 颜色高亮显示
						// 点击事件
						click(item) {
							vk.navigateTo(`/pages/goods/goods-order-pay?order_no=${item.order_no}&pay=1`);
						},
						// 显示规则
						showRule(item, index) {
							return item.status === 0;
						},
					},
					{
						text: "评价",
						main: true, // 颜色高亮显示
						// 点击事件
						click(item) {
							vk.navigateTo({
								url: `./comment?_id=${item._id}`,
								events: {
									// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
									update: (data) => {
										// 当B页面运行 eventChannel.emit('update', { a:1 }); 时，会运行这里的代码逻辑。
										vk.pubfn.objectAssign(item, data);
									}
								}
							})
						},
						// 显示规则
						showRule(item, index) {
							return item.status === 5;
						},
					},
					{
						text: "确认收货",
						main: true, // 颜色高亮显示
						// 点击事件
						click(item) {
							vk.confirm("确定已收到货了吗?","提示","确定","取消",(res) => {
								if(res.confirm){
									vk.callFunction({
										url: 'client/order.confirmReceipt',
										title: '请求中...',
										data: {
											_id: item._id
										},
										success: (data) => {
											vk.pubfn.objectAssign(item, data.info);
										}
									});
								}
							});
						},
						// 显示规则
						showRule(item, index) {
							return item.status === 4 && item.order_type === 0;
						},
					},
					{
						text: "订单详情",
						click(item) {
							vk.navigateTo({
								url: `/pages/goods/goods-order-pay?order_no=${item.order_no}`,
								events: {
									// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
									update: (data) => {
										// 当B页面运行 eventChannel.emit('update', { a:1 }); 时，会运行这里的代码逻辑。
										vk.pubfn.objectAssign(item, data);
									}
								},
								success: (res) => {
									// 通过eventChannel向被打开页面传送数据
									res.eventChannel.emit('data', item);
								}
							})
						}
					},
					{
						text: "查看物流",
						click(item) {
							vk.navigateTo(`/pages/user/order/express?name=${item.express_info.express_name}&no=${item.express_info.express_no}&phone=${item.express_info.receiver_mobile}`);
						},
						// 显示规则
						showRule(item, index) {
							return [3,4,5,6].indexOf(item.status) > -1 && item.order_type == 0 && item.delivery_mode !== 2;
						}
					},
					{
						text: "取消订单",
						click(item) {
							vk.confirm("确定取消订单吗？取消后不可恢复！","提示","确定取消","再想想",(res)=>{
								if(res.confirm){
									// 点击确定按钮后的回调
									vk.callFunction({
										url: 'client/order.cancel',
										title:'请求中...',
										data:{
											order_no: item.order_no
										},
										success:(data)=>{
											vk.pubfn.objectAssign(item, data.orderInfo);
										}
									});
								}
							});
						},
						// 显示规则
						showRule(item, index) {
							return item.status === 0;
						}
					},
					{
						text: "再来一单",
						async click(item) {
							let { order_no, goods_sku_list } = item;
							// 记录临时购物车数据
							await vk.myfn.cart.addTemp(goods_sku_list);
							vk.navigateTo({
								url: `/pages/goods/goods-cart?order_no=${order_no}`
							});
						},
						// 显示规则
						showRule(item, index) {
							return item.status !== 0;
						}
					},
				]
			},
			// 页面上所有弹窗的开关
			show: {
				_add_time: false, // 高级搜索弹窗中的日历选择弹窗开关
				advancedSearch: false, // 高级搜索弹窗开关
			},
			loading: false, // 是否请求中
			scrollTop: 0, // 滚动条当前位置
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {

	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面触底部
	onReachBottom(options) {
		this.nextPage();
	},
	// 监听 - 点击右上角转发时 https://uniapp.dcloud.io/api/plugins/share.html#onshareappmessage
	onShareAppMessage(options) {

	},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			console.log("init: ", options);
			// 拷贝一份表单的初始值
			originalForms["queryForm1"] = vk.pubfn.copyObject(that.queryForm1.formData);

			// 根据url参数status，设置当前选中的状态
			if (options.status) {
				let index = vk.pubfn.getListIndex(that.subsection1.list, "value", Number(options.status));
				if (index < 0) index = 0;
				that.sectionChange1(index, false);
			}

			if (options.type) {
				let index = vk.pubfn.getListIndex(that.subsection2.list, "value", Number(options.type));
				if (index < 0) index = 0;
				that.sectionChange2(index, false);
			}

			// 查询
			that.search();
			that.getOrderGroupNum();
		},
		getOrderGroupNum(){
			let that = this;
			let current = that.subsection2.current;
			if (current === 0) {
				// 全部
				that.subsection1.list = [
					{ name: "全部", value: "", num:0 },
					{ name: "待付款", value: 0, num:0 },
					{ name: "待完成", value: 1, num:0 },
					{ name: "待评价", value: 2, num:0 },
					{ name: "已完成", value: 3, num:0 },
					{ name: "售后", value: 4, num:0 }
				]
			} else if (current === 1) {
				// 电商
				that.subsection1.list = [
					{ name: "全部", value: "", num:0 },
					{ name: "待付款", value: 0, num:0 },
					{ name: "待发货", value: 1, num:0 },
					{ name: "待收货", value: 2, num:0 },
					{ name: "待评价", value: 3, num:0 },
					{ name: "售后", value: 4, num:0 }
				]
			} else if (current === 2) {
				// 电子卡券
				that.subsection1.list = [
					{ name: "全部", value: "", num:0 },
					{ name: "待付款", value: 0, num:0 },
					{ name: "待使用", value: 1, num:0 },
					{ name: "已使用", value: 2, num:0 },
					{ name: "已关闭", value: 3, num:0 },
					{ name: "售后", value: 4, num:0 }
				]
			}
			vk.callFunction({
				url: 'client/user.getMyOrderGroupNum',
				loading: true,
				data: that.queryForm1,
				success: (data) => {
					if (current === 0) {
						// 全部
						that.subsection1.list[1].num = data.groupArr["待付款"]; // 待付款
						that.subsection1.list[2].num = data.groupArr["待完成"]; // 待完成
						that.subsection1.list[3].num = data.groupArr["待评价"]; // 待评价
						that.subsection1.list[4].num = data.groupArr["已完成"]; // 已完成
						that.subsection1.list[5].num = data.groupArr["售后"]; // 售后
					} else if (current === 1) {
						// 电商
						that.subsection1.list[1].num = data.groupArr["待付款"]; // 待付款
						that.subsection1.list[2].num = data.groupArr["待发货"]; // 待发货
						that.subsection1.list[3].num = data.groupArr["待收货"]; // 待收货
						that.subsection1.list[4].num = data.groupArr["待评价"]; // 待评价
						that.subsection1.list[5].num = data.groupArr["售后"]; // 售后
					} else if (current === 2) {
						// 电子卡券
						that.subsection1.list[1].num = data.groupArr["待付款"]; // 待付款
						that.subsection1.list[2].num = data.groupArr["待使用"]; // 待使用
						//that.subsection1.list[3].num = data.groupArr["已使用"]; // 已使用
						//that.subsection1.list[4].num = data.groupArr["已关闭"]; // 已关闭
						that.subsection1.list[5].num = data.groupArr["售后"]; // 售后
					}
				}
			});
		},
		// 搜索查询
		search(e) {
			let that = this;
			that.queryForm1.pagination.pageIndex = 1;
			that.data.pageKey = true;
			that.getList();
		},
		// 加载下一页数据
		nextPage() {
			let that = this;
			if (that.state.loadmore == "loadmore") {
				that.state.loadmore = "loading";
				that.queryForm1.pagination.pageIndex++;
				that.getList();
			}
		},
		// 获取list数据
		getList(obj = {}) {
			let that = this;
			vk.pubfn.getListData2({
				that: that,
				url: that.url,
				success: obj.success
			});
		},
		// 顶部选项改变事件
		sectionChange1(index, search=true) {
			let that = this;
			if (index < 0) {
				return false;
			}
			that.subsection1.current = index;
			let key = that.subsection1.key;
			let value = that.subsection1.list[index].value;
			that.$set(that.queryForm1.formData, key, value);
			that.data.list = [];
			that.data.total = "-";
			// 搜索
			if (search) that.search();
		},
		// 顶部选项改变事件
		sectionChange2(index, search=true) {
			let that = this;
			if (index < 0) {
				return false;
			}
			that.subsection2.current = index;
			let key = that.subsection2.key;
			let value = that.subsection2.list[index].value;
			that.$set(that.queryForm1.formData, key, value);
			that.data.list = [];
			that.data.total = "-";
			// 搜索
			if (search) that.search();
		},
		// 高级搜索 - 确定按钮
		advancedSearchConfirm() {
			let that = this;
			that.show.advancedSearch = false;
			that.search();
			that.getOrderGroupNum();
		},
		// 高级搜索 - 重置按钮
		advancedSearchReset() {
			let that = this;
			that.queryForm1.formData = vk.pubfn.copyObject(originalForms["queryForm1"]);
			that.search();
			that.getOrderGroupNum();
		},
		// 折叠开关
		collapse(index) {
			let that = this;
			that.footer.actived = that.footer.actived !== index ? index : "";
		},
		// 底部按钮显示判断
		footerShowFn(btn, item, index) {
			let that = this;
			if (typeof btn.showRule == "function") {
				return btn.showRule(item, index);
			} else {
				return true;
			}
		},
		// 折叠打开后的底部按钮点击事件
		footerBtn(item, btn, index) {
			if (typeof btn.click === "function") {
				btn.click(item, btn, index);
			}
		},
		// 监听 - 日历组件的change事件
		calendarChange(e) {
			let that = this;
			that.$set(that.queryForm1.formData, "_add_time", [
				vk.pubfn.toTimeLong(e.startDate + " 00:00:00"),
				vk.pubfn.toTimeLong(e.endDate + " 23:59:59")
			]);
		},
		status3Fn(item){
			let {
				status,
				order_type
			} = item;
			let obj = {
				"-4":"已关闭",
				"-3":"已全额退款",
				"-2":"申请退款中",
				"-1":"已取消",
				"0":"待付款",
				"1":"待发货",
				"2":"准备发货中",
				"3":"待收货",
				"4":"待收货",
				"5":"待评价",
				"6":"已完成"
			};
			if (order_type === 1) {
				obj = {
					...obj,
					"3":"待使用",
					"4":"待使用",
				};
			}
			return obj[status.toString()];
		}
	},
	// 监听器
	watch:{
		"subsection2.current":{
			handler(newVal, oldVal){
				this.getOrderGroupNum();
			},
		}
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.app{
	background-color: var(--bgcolor);
	min-height: calc(100vh - var(--window-top));
}

/* list主结构开始 */
.list-page {
	background-color: var(--bgcolor);

	/* 头部 */
	.list-head {
		.total-desc {
			font-size: 28rpx;
			color: #999;
			padding: 20rpx 30rpx 0rpx 30rpx;
			padding-bottom: 0;
			line-height: 52rpx;
			width: 100%;
		}

		.total-num {
			font-weight: bold;
			color: black;
			font-size: 26rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.list-search {
			background-color: #ffffff;
			padding: 20rpx 30rpx;

			.subsection {
				margin-top: 20rpx;
			}

			.list-search-input {
				display: flex;

				.search-input {
					flex: 1;
				}

				.advanced-search {
					margin-left: 20rpx;
				}
			}
		}
	}

	.list-main {
		padding: 0rpx 0rpx 20rpx 0rpx;
	}

}

/* list主结构结束 */

/* 高级搜索弹窗开始 */
.search-popup {
	background-color: #f3f3f3;

	.scroll-view {
		flex: 1;
		height: 1024rpx;
		padding: 0;
	}

	.footer-btn {
		display: flex;
		.btn {
			flex: 1;
			display: block;
			text-align: center;
			line-height: 80rpx;
		}
		.btn:active {
			opacity: 0.7;
		}
		.reset {
			color: #404040;
			background-color: #ffffff;
		}
		.confirm {
			background-color: var(--main);
			color: #ffffff;
		}
	}

	::v-deep .u-form-item {
		background-color: #ffffff;
		display: block;
		padding: 20rpx;
		color: #7e7e7e;
		padding-top: 6rpx;
		color: #262626;
		margin-bottom: 20rpx;
	}

	.date-range {
		text-align: center;
		background-color: #f6f6f6;
		line-height: 60rpx;
		border-radius: 30rpx;
		color: #7f7f7f;
		width: 100%;
	}
}
/* 高级搜索弹窗结束 */

/* list-item开始 */
.list-item {
	margin: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
	>.content {
		background-color: #ffffff;
		padding: 20rpx;
		color: #606266;

		.mt10{
			margin-top: 10rpx;
		}

		.text-one {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		>.top{
			display: flex;
			.nickname{
				flex: 1;
				font-weight: bold;
			}
			.status{
				color: var(--main);
			}
		}
		>.goods-list{
			margin-top: 20rpx;
		}
	}

	.collapse {
		display: none;
		padding: 20rpx;
		font-size: 24rpx;
		color: #909399;
		line-height: 40rpx;
		background-color: #ffffff;
		border-top: 1px solid #f8f8fa;

		grid-template-columns: repeat(5, 1fr);
		gap: 16rpx;
		box-sizing: border-box;
		direction: rtl; //反向填充

		>view {
			border: 2rpx solid #909399;
			border-radius: 20rpx;
			text-align: center;
			padding: 2rpx 10rpx;
			color: #909399;
		}
		>view.main {
			border: 2rpx solid var(--main);
			color: var(--main);
		}
	}

	.collapse.actived {
		display: grid;
	}
}
/* list-item结束 */


</style>
